// 列表页(分页)js

// 1. 先显示加载层
let index = layer.load(0,{shade:[0.3,'#ccc']});

// 请求获取数据
$.ajax({
  url:'../server/list.php',
  dataType:'json',
  success(res){
    // 结构数据
    let {data} = res;
    // layui分页组件
    // 引入了layui之后使用use方法导入laypage
  layui.use(['laypage'], function(){
    let laypage = layui.laypage;              
    //调用分页
    laypage.render({
      elem: 'page', // 在页面中渲染分页组件的标签id
      count: data.length, // 总数据的条数
      // count:数据总条数显示 prev:上一页  next:下一页
      layout: ['prev', 'page', 'next', 'limit', 'refresh', 'skip'],
      limits:[4,8,12],
      limit:4,
      first:'首页',
      last:'尾页',
      groups:6,
      jump: function(obj){ // 页码跳转函数        
        let str = function(){ // 自调用函数执行,返回一个拼接好的html字符串
          var thisData = data.concat().splice((obj.curr -1)*obj.limit, obj.limit);          
          var arr = thisData.map(v=>`
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <div class="thumbnail">
                <img src="${v.imgpath.split('==========')[0]}" alt="...">
                <div class="caption">
                    <h3>${v.name}</h3>
                    <p class='introduce'>${v.introduce}</p>
                    <p>
                        <!--将商品的id存储到index属性中-->
                        <a href="#" class="btn btn-default detail" role="button" index=${v.id}>查看详情</a>
                    </p>
                </div>
            </div>
          </div>
          `);
          return arr.join('');
        }();
        //渲染
        $('#list').html(str);
        // 关闭弹出层
        layer.close(index);
      }
    });     
  });
  }
})


// 使用事件委托进行查看详情的跳转
$('#list').on('click','.detail',function () {
  // 获取商品的id
  let id = $(this).attr('index');
  // 将商品id存储到sessionStorage中  在跳转的页面中页面方法到商品的id

  // console.log(6666);
  
  sessionStorage.setItem('goodsId',id);
  // 跳转
  location.href = 'detail.html';
  return false;// 阻止默认跳转
})